import { message, Modal, Form, Input, Typography, Space, Button } from "antd";
import { useEffect } from "react";
import RequestUtils from "../../../utils/requestUtils";
import RequestApis from "../../../apis/requestApis";

const { Text } = Typography;

/**
 * 主题编辑模态框组件
 * 用于编辑主题的描述信息，仅支持修改描述字段
 * @param {Object} props - 组件参数
 * @param {boolean} props.visible - 控制模态框显示/隐藏
 * @param {Function} props.setVisible - 更新模态框显示状态的回调
 * @param {Function} props.searchAllTopicList - 编辑成功后刷新列表的回调
 * @param {Object} props.topicDetail - 待编辑的主题详情（包含topic和description字段）
 * @returns {JSX.Element} 渲染后的编辑模态框
 */
const TopicEdit = (props) => {
    const { visible, setVisible, searchAllTopicList, topicDetail } = props;

    // 消息提示组件
    const [messageApi, contextHolder] = message.useMessage();

    // 表单实例管理
    const [form] = Form.useForm();

    /**
     * 提交编辑请求
     * 先验证表单，通过后调用接口修改描述
     */
    const handleSubmit = () => {
        form.validateFields()
            .then(values => {
                // 构造请求参数（主题名称不可修改，仅传递description）
                const editTopicReq = {
                    topic: topicDetail?.topic, // 从props获取原始主题名（不可改）
                    description: values.description
                };

                // 调用编辑接口
                RequestUtils.post(RequestApis.messageManage.editTopicDescription, editTopicReq)
                    .then(() => {
                        messageApi.success("主题描述编辑成功");
                        searchAllTopicList(); // 刷新列表
                        setVisible(false); // 关闭模态框
                    })
                    .catch(err => {
                        messageApi.error(err.message || "编辑失败，请重试");
                    });
            })
            .catch(info => {
                // 表单验证失败提示
                messageApi.warning("请输入有效的描述信息");
            });
    };

    /**
     * 模态框显示时初始化表单值
     * 从topicDetail中获取当前描述信息
     */
    useEffect(() => {
        if (visible && topicDetail) {
            form.setFieldsValue({
                description: topicDetail.description || ""
            });
        }
        // eslint-disable-next-line
    }, [visible]);

    // 自定义底部按钮区域（确认在左，取消在右）
    const footer = (
        <Space size="middle" style={{ width: "100%", justifyContent: "flex-end" }}>
            {/* 确认按钮 - 左侧 */}
            <Button
                type="primary"
                onClick={handleSubmit}
                style={{ minWidth: 80 }}
            >
                确认
            </Button>

            {/* 取消按钮 - 右侧（危险样式） */}
            <Button
                danger
                onClick={() => setVisible(false)}
                style={{ minWidth: 80 }}
            >
                取消
            </Button>
        </Space>
    );

    return (
        <Modal
            open={visible}
            title={
                <Text strong>
                    编辑主题：
                    <Text style={{ color: "#1890ff", marginLeft: 8 }}>
                        {topicDetail?.topic || ""}
                    </Text>
                </Text>
            }
            footer={footer} // 使用自定义按钮布局
            maskClosable={false} // 点击遮罩不关闭（防止误操作）
            style={{ top: 30 }} // 适当上移，优化显示位置
            width={500} // 固定宽度，提升输入体验
        >
            {/* 消息提示容器 */}
            {contextHolder}

            {/* 表单区域 */}
            <Form
                form={form}
                layout="vertical"
                style={{ marginTop: 16 }}
            >
                {/* 描述输入框（固定高度的TextArea） */}
                <Form.Item
                    name="description"
                    label={
                        <Text style={{ color: "#1f2329" }}>
                            主题描述
                        </Text>
                    }
                    rules={[
                        { max: 512, message: "描述长度不能超过512个字符" } // 长度限制
                    ]}
                    tooltip="请输入主题的详细描述信息"
                >
                    <Input.TextArea
                        placeholder="请输入主题描述..."
                        maxLength={512}
                        rows={4} // 固定4行高度
                        style={{
                            borderRadius: 4,
                            borderColor: "#d9d9d9",
                            resize: "none", // 禁止拉伸调整大小
                            fontSize: 14,
                            lineHeight: 1.5
                        }}
                        showCount // 显示输入字数统计
                    />
                </Form.Item>

                {/* 辅助说明 */}
                <Text type="secondary" style={{ fontSize: 12 }}>
                    提示：仅可修改主题描述，主题名称不可变更
                </Text>
            </Form>
        </Modal>
    );
};

export default TopicEdit;